<template>
	<div class="icons">
	<swiper>
		<swiper-slide v-for="(page,index) of pages" :key="index">
			<div class="icon" v-for="item of page" :key="item.id">
				<div class="icon-img">
					<img class="icon-img-content" :src="item.imgUrl">
				</div>
				<p class="icon-desc">{{item.desc}}</p>
			</div>
		</swiper-slide>
	</swiper>
	</div>
</template>

<script>
	export default{
		name: 'HomeIcons',
		computed:{
			pages (){
				const pages = []
				this.iconList.forEach((item,index) => {
					const page = Math.floor(index / 8)
					if(!pages[page]){
						pages[page] = []
					}
					pages[page].push(item)
				})
				return pages;
			}
		},
		data(){
			return{
				iconList:[{
					id: '0001',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
					desc: '景点门票'
				}, {
					id: '0002',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png',
					desc: '滑雪季'
				},{
					id: '0003',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png',
					desc: '泡温泉'
				},{
					id: '0004',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
					desc: '成都必游'
				},{
					id: '0005',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
					desc: '景点门票'
				}, {
					id: '0006',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png',
					desc: '滑雪季'
				},{
					id: '0007',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png',
					desc: '泡温泉'
				},{
					id: '0008',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
					desc: '成都必游'
				},{
					id: '0009',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
					desc: '成都必游'
				}]
			}
		}
	}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  @import '~styles/varibles.styl'
	  .icons >>> .swiper-container
	    height: 0
	    padding-bottom: 50%
	  .icon
	    float: left
	    position: relative
	    width: 25%
	    padding-bottom: 25%
	    overflow: hidden
	    height: 0
	    .icon-img
	      position: absolute
	      top: 0
	      left: 0
	      right: 0
	      bottom: .44rem
	      box-sizing: border-box
	      padding: .1rem
	      .icon-img-content
	        height: 130%
	        display: block
	        margin: 0 auto
	    .icon-desc
	      position: absolute
	      left: 0
	      right: 0
	      bottom: 0
	      height: .44rem
	      line-height: .44rem
	      text-align: center
	      color: $darkTextColor
	      ellipsis()

</style>